/* Copyright 2023 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* This file will override dynamic color tokens for a color scheme that is same
 * as the theme before dynamic color.
 * TODO(pihsun): Remove this file and all references once dynamic color is
 * enabled by default.
 */
:root {
  --cros-sys-app_base: var(--grey-900);
  --cros-sys-base_elevated: var(--grey-900);
  --cros-sys-error_container: rgba(var(--red-300-rgb), 0.3);
  --cros-sys-focus_ring: var(--blue-300);
  --cros-sys-hover_on_subtle: rgba(255, 255, 255, 0.06);
  --cros-sys-inverse_on_surface: black;
  --cros-sys-primary: var(--blue-300);
  --cros-sys-scrim2: rgba(0, 0, 0, 0.6);
  --cros-sys-on_error_container: var(--red-300);
  --cros-sys-on_surface: var(--grey-200);
}

.mode-item > input:checked + span {
  background: white;
  box-shadow: 0 2px 3px rgba(var(--grey-900-rgb), 0.3);
}

.mode-subgroup {
  backdrop-filter: blur(30px);
  background: rgba(255, 255, 255, 0.06);
}

.mode-subgroup > .item input:checked + div.label {
  background: var(--grey-200);
  box-shadow: 0 2px 3px rgba(var(--grey-900-rgb), 0.3);
  color: var(--grey-900);
}

#open-mirror-panel,
#open-grid-panel,
#open-timer-panel,
#open-ptz-panel,
#toggle-mic {
  border-radius: 50%;
}

#open-mirror-panel,
#open-grid-panel {
  /* Always use the "on" icon before jelly. */
  .off-icon {
    display: none;
  }
  .on-icon {
    display: block;
  }
}

body.mirror #open-mirror-panel,
body.grid #open-grid-panel,
body:is(.timer-10s, .timer-3s) #open-timer-panel,
body.view-ptz-panel #open-ptz-panel {
  /* Before jelly, the background size is slightly smaller at 36px */
  background: radial-gradient(
    rgba(var(--blue-300-rgb), 0.24) 18px,
    transparent 19px
  );
  :is(svg-wrapper) {
    color: var(--blue-300);
  }
}

body:not(.mic) #toggle-mic {
  /* Before jelly, the background size is slightly smaller at 36px */
  background: radial-gradient(
    var(--cros-sys-error_container) 18px,
    transparent 19px
  );
}

.barcode-scan-box::after {
  border: var(--border-width) solid white;
}

.snackbar {
  background: var(--grey-900);
  color: var(--grey-200);
}
